<template>
  <div>
    <el-card>
      <div slot="header"
           class="clearfix">
        <span>退换货申请单</span>
      </div>
      <el-form ref="orderForm"
               :model="orderForm"
               :rules="formRule"
               label-position="right"
               label-width="120px"
               style="width:100%;flex-wrap:wrap"
               class="flex">
        <el-form-item label="订单号"
                      prop="orderNum"
                      style="width:30%">
          <el-input v-model="orderForm.orderNum"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="订单时间"
                      prop="addTime"
                      style="width:30%">
          <el-input v-model="orderForm.addTime"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="订单状态"
                      prop="status"
                      style="width:30%;">
          <el-input v-model="orderForm.status"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

       <el-form-item label="付款方式"
                      prop="payType"
                      style="width:30%;">
          <el-input v-model="orderForm.payType"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        
       <el-form-item label="订单金额"
                      prop="totalPrice"
                      style="width:30%;">
          <el-input v-model="orderForm.totalPrice"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

         <el-form-item label="购买账号"
                      prop="realName"
                      style="width:30%;">
          <el-input v-model="orderForm.realName"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="购买用户手机号"
                      prop="userPhone"
                      style="width:30%;">
          <el-input v-model="orderForm.userPhone"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="收货人姓名"
                      prop="realName"
                      style="width:30%;">
          <el-input v-model="orderForm.realName"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话"
                      prop="userPhone"
                      style="width:30%;">
          <el-input v-model="orderForm.userPhone"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
       
        <el-form-item label="收货地址"
                      prop="userAddress"
                      style="width:30%;">
          <el-input v-model="orderForm.userAddress"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="productListData"
                style="width: 100%"
                height="400"
                stripe>

        <el-table-column prop="productCode"
                         label="制造商料号"
                         align="center"></el-table-column>
        <el-table-column prop="menuName"
                         label="供应商"
                         align="center"></el-table-column>
        <el-table-column prop="buyNum"
                         label="购买数量"
                         align="center"></el-table-column>
        <el-table-column prop="totalMoney"
                         label="总金额"
                         align="center"></el-table-column>
        <el-table-column prop="sonRefundStatus"
                        label="申请类型"
                        align="center"></el-table-column>
        <el-table-column prop="refundReasonWapExplain"
                        label="申请原因"
                        align="center"></el-table-column>
        <el-table-column prop="buyNum"
                        label="申请数量"
                        align="center"></el-table-column>
        <el-table-column prop="refundPrice"
                        label="退款金额"
                        align="center"></el-table-column>
        <el-table-column prop="refundReasonWapImg" label="原因图片" align="center">
          <template slot-scope="scope"><img :src="scope.row.refundReasonWapImg" width="40" height="40" class="head_pic"/></template>
        </el-table-column>
        <el-table-column prop="sonRefundStatus2"
                         label="处理状态"
                         align="center"></el-table-column>
        <el-table-column prop="refundReason"
                         label="审批备注"
                         align="center"></el-table-column>

        <el-table-column label="操作"
                         align="center"
                         fixed="right"
                         width="120">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       :disabled="scope.row|statusFilter"
                       @click="sureOrder(scope.row,scope.$index)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:center;margin-top:20px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
    </el-card>
    <el-dialog title="退换货处理"
                 :visible.sync="confirmVisiable"
                 width="40%">
        <el-form ref="confirmForm"
               :model="confirmForm"
               label-position="right"
               label-width="120px"
               style="width:100%;flex-wrap:wrap"
               class="flex">
          <el-form-item label="审批备注"
                        prop="paid">
            <el-input v-model="confirmForm.memo"
                      placeholder=""></el-input>
          </el-form-item>
        </el-form> 
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="confirmVisiable = false">取 消</el-button>
          <el-button type="danger"
                     @click="unConfirm()">拒绝</el-button>
          <el-button type="primary"
                     @click="confirm()">同意</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import {
  ORDER_CART_LIST,ORDER_PRODUCT_LIST,
  ORDER_AGREE, ORDER_REFUSE,ORDER_CONFIRM_CHANGE
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
import axios from 'axios'
export default {
  data () {
    return {
      confirmForm:{memo:''},
      mainId:null,
      confirmVisiable:false,
      dialogVisible: false,
      redialogVisible: false,
      orderForm: {},
      formRule: {},
      productListData:[],
      payOptions: [
        { value: "0",
          label: "未支付" },
        { value: "1",
          label: "已支付" },
        { value: "3",
          label: "线下处理" }
      ],
      payMethods: [
        { value: "0",
          label: "银行卡" },
        { value: "1",
          label: "线下支付" }
      ],
      orderOptions: [
        { value: "0",
          label: "未打回" },
        { value: "1",
          label: "已打回" },
        { value: "2",
          label: "未确认" }
      ],
      isDisabled: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      disabled: true
    };
  },
  filters: {
    statusFilter (val) {
      console.log(val.sonRefundStatus2)
      //return val.sonRefundStatus2=='未处理' ? false : true;
      return val.sonRefundStatus2=='待处理' ? false : true;
    }
  },
  mounted () {
    if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.orderForm = this.$route.query["data"];
      console.log('==>'+JSON.stringify(this.orderForm))
      this.mainId=this.orderForm.id
      

      //状态
      switch(this.orderForm.status){
        case 0:
          this.orderForm.status = "待付款"
          break
        case 1:
          this.orderForm.status = "待收货"
          break;
        case 2:
          this.orderForm.status = "待发货"
          break;
        case 3:
          this.orderForm.status = "待评价"
          break;
        case 6:
          this.orderForm.status = "已评价"
          break;
        case -1:
          this.orderForm.status = "退换货订单"
          break;
        case 4:
          this.orderForm.status = "已完成"
          break;
      }
      this.getOrderList()
    }
  },
  methods: {
    confirm(){
        ORDER_CONFIRM_CHANGE({
            orderProductId:this.confirmForm.sonid,
            confirmType:1,
            comment:this.confirmForm.memo
        }).then(res=>{
          this.$message.success('同意成功') 
          this.confirmVisiable=false
          this.getOrderList()
        })
    },
    unConfirm(){
       ORDER_CONFIRM_CHANGE({
            orderProductId:this.confirmForm.sonid,
            confirmType:2,
            comment:this.confirmForm.memo
        }).then(res=>{
          this.$message.success('拒绝成功') 
          this.confirmVisiable=false
          this.getOrderList()
        })
    },
    sureOrder (row, index) {
      this.confirmForm=row
      this.confirmVisiable=true
    },
    getOrderList () {
      console.log('===>'+this.mainId)
      ORDER_PRODUCT_LIST({ 
          mainId: this.mainId,
          pageNo:this.currentPage,
          pageSize:this.pageSize,
          refundStatus:1          
      }).then(res => {
          this.productListData = res.data.dataList
          this.total = res.data.count
        
          for (let i in this.productListData) {
            this.productListData[i].addTime = this.formatSecond(this.productListData[i].addTime)
            //处理状态
            switch(this.productListData[i].sonRefundStatus){
              case 2:
              case 4:
              case 5:
                this.productListData[i].sonRefundStatus2 = "已同意" //已处理 jsw
                break
              default:
                  this.productListData[i].sonRefundStatus2 = "待处理" //未处理 jsw
                break;
            }
            
            if(this.productListData[i].adminStatus==-10){
              this.productListData[i].sonRefundStatus2 = "已拒绝" //拒绝 jsw
            }else if(this.productListData[i].adminStatus==-20){
              this.productListData[i].sonRefundStatus2 = "用户撤销"
            }
            //申请类型
            switch(this.productListData[i].sonRefundStatus){
              case 2:
              case -2:
                this.productListData[i].sonRefundStatus = "退款"
                break
              case 4:
              case -4:
                this.productListData[i].sonRefundStatus = "换货"
                break;
              case 5:
              case -5:
                this.productListData[i].sonRefundStatus = "退款换货"
                break;
              case -10:
                this.productListData[i].sonRefundStatus = "拒绝"
                break;
              case -20:
                this.productListData[i].sonRefundStatus = "申请撤销"
                break;
            }
            
          }
        
      })
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getOrderList()
    }
  }
};
</script>

<style lang="scss" scoped>
</style>